<template>
	<div>
		<el-button type="primary" round @click="dialogFormVisible = true">添加</el-button>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="_id" label="ID" width="250">
			</el-table-column>
			<el-table-column prop="name" label="分类名称" width="180">
			</el-table-column>
			<el-table-column prop="descriptions" label="商品描述" width="180">
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="success" round @click="updateframe(scope.row)">编辑</el-button>
					<el-button type="danger" round @click="delCategories(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 添加商品分类框 -->
		<el-dialog title="商品信息" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="商品名字">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品简介">
					<el-input v-model="form.descriptions" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="主图">
					<el-input v-model="form.coverImg" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCategories">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑商品分类框 -->
		<el-dialog title="商品信息" :visible.sync="updateVisible" @close='close'>
			<el-form :model="form1">
				<el-form-item label="商品名字">
					<el-input v-model="form1.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="商品简介">
					<el-input v-model="form1.descriptions" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="主图">
					<el-input v-model="form1.coverImg" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updateVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateCategories">确 定</el-button>
			</div>
		</el-dialog>
		<el-pagination
		  background
		  layout="prev, pager, next"
		  :total="totalCount"
		  @current-change="handleCurrentChange"
		  :currentPage='currentPage'
		  class='fen'
		  >
		</el-pagination>
	</div>
</template>

<script>
	import * as api from '../api/Goods'
	export default {
		name: 'categories',
		data() {
			return {
				tableData: [],
				_id:'',
				form:{
					name:'',
					descriptions:'',
					coverImg:''
				},
				form1:{},
				dialogFormVisible:false,
				updateVisible:false,
				currentPage:1,
				totalCount:50
			}
		},
		methods:{
			close(){
				api.categories({
					per:6,
					page:this.currentPage
				}).then(res => {
					this.totalCount = res.data.totalCount
					this.tableData = res.data.categories
				})
			},
			// 添加商品分类
			addCategories(){
				api.addCategories({
					name:this.form.name,
					descriptions:this.form.descriptions,
					coverImg:this.form.coverImg,
					
				}).then(res=>{
					this.dialogFormVisible = false
					this.form.name=''
					this.form.descriptions=''
					this.form.coverImg=''
					this.handleCurrentChange()
				})
			},
			// 修改商品分类
			updateframe(row){
				this._id = row._id
				this.form1 = row
				this.updateVisible = true
			},
			updateCategories(){
				api.updateCategories(this._id,{
					name:this.form1.name,
					descriptions:this.form1.descriptions,
					coverImg:this.form1.coverImg
				}).then(res=>{
					this.updateVisible = false
				})
			},
			// 删除商品分类s
			delCategories(row){
				this._id=row._id
				api.deleteCategories(this._id).then(res=>{
					if(res.status==200){
						alert('删除成功')
						this.handleCurrentChange()
					}
				})
			},
			handleCurrentChange(currentPage){
				this.currentPage = currentPage
				api.categories({
					per:6,
					page:this.currentPage
				}).then(res => {
					this.totalCount = res.data.totalCount
					this.tableData = res.data.categories
				})
			},
		},
		mounted() {
			api.categories({
				per:6,
				page:1
			}).then(res => {
				this.totalCount = res.data.totalCount
				this.tableData = res.data.categories
			})
		}
	}
</script>

<style scoped="">
	.fen{
		position: absolute;
		left: 40%;
		bottom: 10px;
	}
</style>
